import React from 'react'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from 'react-router-dom'

class GalleryComponent extends React.Component {
    constructor(props) {
        super(props)
        this.previousLocation = this.props.location
    }

    componentWillUpdate(nextProps) {
        const {location} = this.props;
        // 非 POP 就把 this.props.location 赋值给 previousLocation。
        if (nextProps.history.action !== 'POP') {
            this.previousLocation = this.props.location
        }
    }

    render() {
        const {location} = this.props
        const isModal = !!(
            location.state &&
            location.state.modal &&
            this.previousLocation !== location // 不是首次渲染。
        )
        console.log(location.state);
        return (
            <div>
                <Switch location={isModal? this.previousLocation: location}>
                    <Route exact path='/' component={Gallery}/>
                </Switch>
                {isModal ? <Route path='/img/:id' component={Modal}/> : null}
            </div>
        )
    }
}

const Home2 = ()=> {
    return <div>
        <Link key="100" to={{pathname: `/img/3`,/**这里是关键！*/ state: { modal: true }}}>
            <Thumbnail color="#789"/><p>ABC</p>
        </Link>
    </div>
}

const Gallery = () => {
    return (
        <div>
            {IMAGES.map(i => (
                <Link key={i.id} to={{pathname: `/img/${i.id}`,/**这里是关键！*/ state: { modal: true }}}>
                    <Thumbnail color={i.color}/><p>{i.title}</p>
                </Link>
            ))}
        </div>
    )
}

const Thumbnail = ({color}) =>
    <div style={{
    width: 50,
    height: 50,
    background: color
  }}/>

const Image = ({color}) =>
    <div style={{
    width: '100%',
    height: '80%',
    background: color
  }}/>


const IMAGES = [
    {id: 0, title: '深兰花紫', color: 'DarkOrchid'},
    {id: 1, title: '石灰绿', color: 'LimeGreen'},
    {id: 2, title: '番茄色', color: 'Tomato'},
    {id: 3, title: '#七八九', color: '#789'},
    {id: 4, title: '赤红色', color: 'Crimson'}
]

var styles = {}

styles.modal_root = {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    background: 'rgba(0, 0, 0, 0.15)'
}

styles.modal_panel = {
    position: 'absolute',
    background: '#fff',
    top: 0,
    left: '10%',
    right: '10%',
    bottom: 0,
    border: '2px solid #444'
}

const Modal = ({match, history}) => {
    const image = IMAGES[parseInt(match.params.id, 10)]
    if (!image) {
        return null;
    }
    const back = (e) => {
        e.stopPropagation()
        history.goBack()
    }
    return (
        <div onClick={back} style={styles.modal_root}>
            <div className='modal' style={styles.modal_panel}>
                <h1>{image.title}</h1>
                <Image color={image.color}/>
                <button type='button' onClick={back}>关闭</button>
            </div>
        </div>
    )
}


const GalleryEx = ()=> {
    return <Router>
        <Route component={GalleryComponent}/>
    </Router>
}

export default GalleryEx
